<template>
    <!-- 使用Element Plus的Tree Select组件展示分类树 -->
    <el-tree-select
        v-model="modelValue"
        :data="categoryTreeData"
        :default-expand-all="true"
        style="width: 240px"
        :check-strictly="true" />
</template>

<script setup lang="ts">
import { categoryApi } from '@/api';
import { onMounted, ref, defineExpose, defineModel } from 'vue';

// 定义模型绑定，用于设置或获取第一级目录的标题，默认值为“一级目录”
const firstLevelTitle = defineModel("title", { default: "一级目录" });

// 定义模型绑定，用于双向绑定Tree Select组件的选中值
const modelValue = defineModel();

// 响应式引用，用于存储分类树数据
const categoryTreeData = ref([]);

/**
 * 调用分类API以获取和处理分类数据
 * 此函数旨在从API获取分类信息，并将其格式化为具有层级结构的数据
 */
const callCategoryApi = () => {
  // 调用分类API的select方法获取原始分类数据
  categoryApi.select.call().then((categoryData: any) => {
    // 遍历每个分类项，为其添加label和value属性，以便在组件中使用
    categoryData.forEach((item: any) => {
      item.label = item.name;
      item.value = item.id;
    });

    // 使用reduce方法构建具有父子关系的分类树
    let duzi2 = categoryData.reduce((duzi: any, currentValue: any) => {
      // 为每个分类项查找其子项
      currentValue.children = categoryData.filter((item: any) => {
        if (item.parentId == currentValue.id) {
          return item;
        }
      });

      // 如果当前分类项的父ID为0，则将其添加到顶级分类数组中
      if (currentValue.parentId == 0) {
        duzi.push(currentValue);
      }

      // 返回累积的顶级分类数组
      return duzi;
    }, []);

    // 在分类树的前面添加一个表示第一级标题的特殊项
    duzi2 = [{ label: firstLevelTitle.value, value: 0 }].concat(duzi2);

    // 将构建的分类树赋值给响应式变量，以便在组件中使用
    categoryTreeData.value = duzi2;
  });
};

// 暴露callCategoryApi方法，以便外部调用
defineExpose({ callCategoryApi });

// 组件挂载完成后调用callCategoryApi方法，初始化分类树数据
onMounted(() => {
  callCategoryApi();
});
</script>